<script setup>
import { Delete, Edit, RefreshRight } from '@element-plus/icons-vue';
import { ref } from 'vue';
//测试数据
const data=[{
  "index":"1",
  "number":"EF1006"
}]
const form=[{
  name:""
}]
//管理子页面显示
const dialogFormVisible=ref(false)
function addProducteItemNo(){
  dialogFormVisible.value=true
}
</script>
<template>
<el-row style="background-color: white;margin: 40px 10px 0px;border:mintcream;">
  <el-col :span="24">
    <!-- 表单功能栏 -->
    <el-row class="row1">
      <el-col :span="21">
        <h3>产品货号列表</h3>
      </el-col>
      <el-col :span="3">
        <el-button type="success" @click="addProducteItemNo">
          添加新货号
        </el-button>
      </el-col>
    </el-row>
    <el-row class="row1">
      <el-col :span="3">
        <el-button :icon="RefreshRight" size="middle">
          刷新
        </el-button>
      </el-col>
      <el-col :span="21" class="col2">
        <el-row>
          <el-col :span="22">
            <el-input style="margin:0px 0px 0px -6px ;" v-model="input" class="input" placeholder="请输入产品货号" clearable />
          </el-col>
          <el-col :span="2">
            <el-button type="success" style="margin:0px 0px 0px -6px ;">搜索</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row style="width: 100%;margin: 0px auto;">
        <el-col :span="24">
          <!-- data、click需要更改 -->
          <el-table :data="data" stripe border style="width:100%">
            <el-table-column label="序号" align="center" prop="index" :index="indexMethod" width="100px" />
            <el-table-column label="型号" align="center" prop="index" :index="indexMethod" width="100px" />
            <el-table-column label="货号" align="center" prop="index" :index="indexMethod" width="100px" />
            <el-table-column label="货号名称" align="center" prop="index" :index="indexMethod" width="100px" />
            <el-table-column label="工业路线图" align="center" prop="number" width="300px" />
            <el-table-column label="编辑" align="center">
              <template #default="scope">
                <el-button type="primary" @click="" size="small" :icon="Edit">编辑产品</el-button>
                <el-button type="primary" @click="" size="small" :icon="Edit">产品属性</el-button>
                <el-button type="primary" @click="" size="small" :icon="Edit">产品附件</el-button>
                <el-button type="primary" @click="" size="small" :icon="Edit">产品bom</el-button>
                <el-button type="primary" @click="" size="small" :icon="Edit">工业路线图</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
  </el-col>
</el-row>
<!-- 添加新产品货号子页面 -->
<el-dialog v-model="dialogFormVisible" title="添加新货号">
  <el-row>
    <h3>产品信息</h3>
  </el-row>
  <el-form>
    <el-form-item label="产品货号">
      <el-input v-model="form.name" autocomplete="off" placeholder="请输入产品货号"/>
      <span><h6 style="margin:0">格式示例:可由字母、数字、下划线组合,如工序abc123、abc、abc_123,(长度小于30个字符)</h6></span>
    </el-form-item>
    <el-form-item label="产品型号">
      
    </el-form-item>

  </el-form>
  <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">提交</el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </span>
      </template>
</el-dialog>
</template>
<style scoped>
.row1{
  margin-left: 20px;
  margin-bottom: 10px;
  align-items: center;
  
}
</style>